@charset "utf-8";

$Font: "微软雅黑" arial;
$color: #333;
$mobileFont: 'Helvetica Neue', Helvetica, STHeiTi, Microsoft YaHei, sans-serif, Microsoft JhengHei, Arial;
$browser:null;

%display {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

%text-indent {
  font-size: 0;
  text-indent: -999999em;
  overflow: hidden;
}

%box-sizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: box;
}

// 绝对居中
@mixin center($width, $height) {
  position: absolute;
  left: 50%;
  top: 50%;
  width: $width;
  height: $height;
  margin: (-$height/2) 0 0 (-$width/2);
}
// 设置动画名称
@mixin animation($animName) {
  -webkit-animation: $animName;
  -moz-animation: $animName;
  -o-animation: $animName;
  animation: $animName;
}
// 设置延迟执行时间
@mixin animation-delay($time) {
  -webkit-animation-delay: $time;
  -moz-animation-delay: $time;
  -o-animation-delay: $time;
  animation-delay: $time;
}

// 设置阴影
@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  -o-box-shadow: $shadow;
  box-shadow: $shadow;
}
// 圆角
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}
// 设置过渡
@mixin transition($transition...) {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}
// 设置旋转位置
@mixin transform-origin($origin...) {
  -webkit-transform-origin: $origin;
  -moz-transform-origin: $origin;
  -o-transform-origin: $origin;
  transform-origin: $origin;
}
@mixin transform($transform...) {
  -webkit-transform: $transform;
  -moz-transform: $transform;
  -o-transform: $transform;
  transform: $transform;
}

// 设置关键帧
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    $browser: "-webkit-";
    @content;
  }
  @-moz-keyframes #{$name} {
    $browser: "-moz-";
    @content;
  }
  @-o-keyframes #{$name} {
    $browser: "-o-";
    @content;
  }
  @keyframes #{$name} {
    $browser: "";
    @content;
  }
}

/* ********************重置样式 reset******************** */

/* *********PC端********** */
body,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form,
figure,
figcaption {
  margin: 0px;
}
ul,
ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
body {
  font: 14px/1.5 $Font;
  width: 100%;
  color: $color;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}
/* 清除点击出现虚拟框 */
a {
  outline: none;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  &:focus {
    outline: 0;
  }
  &:link,
  &:visited {
    color: $color;
    text-decoration: none;
  }
}
a img {
  border: none;
}
input,
textarea,
select {
  outline: none;
  font: 12px/1.5 $Font;
}

/* 清除浮动 */
.clearfix {
  *zoom: 1;
  &:after {
    display: block;
    content: "\200B";
    clear: both;
    height: 0;
  }
}

/* *********移动端********** */
body,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form,
figure,
figcaption {
  margin: 0px;
}
/* 改变盒子模型 */
section,
article,
nav,
aside,
footer,
header,
div,
p,
ul,
li,
input,
textarea {
  display: block;
  @extend %box-sizing;
}
html,
body {
  -webkit-user-select: none;
  /* 禁止选中文本 */
  user-select: none;
  -webkit-text-size-adjust: 100%;
  /* iphone禁用文字大小调整 */
  -ms-text-size-adjust: 100%;
}
html {
  font-size: 625%;
}
body {
  font: 0.16rem/1.6 $mobileFont;
  color: #333;
  -webkit-overflow-scrolling: touch;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}
/* 清除点击虚拟框 */
a,
div,
p,
span,
ul,
li,
i,
img,
input {
  outline: 0;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:focus {
  outline: 0;
}
a:link,
a:visited {
  color: $color;
  text-decoration: none;
}
a img {
  border: 0 none;
}
a,
img {
  -webkit-touch-callout: none;
  /* 禁止长按链接与图片弹出菜单 */
}
input,
textarea,
select {
  outline: none;
  color: $color;
  font-family: $mobileFont;
}
input {
  /* 清除 iphone 中 input 默认样式 */
  -webkit-appearance: none;
}
/* 清除浮动 */
.clearfix {
  *zoom: 1;
  &:after {
    display: block;
    content: "\200B";
    clear: both;
    height: 0;
  }
}
